<template>
  <div>
    <div class="clock-warpper">
      <div class="months" :style="itemStyle">
        <div
          class="count-item"
          v-for="(item, index) in months"
          :key="index"
          :style="getStyle(item,index)"
        ><div>{{item}}</div></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RotationClock",
  props: {
    level: Number,
    total: Number,
    currentItem: String
  },
  data() {
    return {
      currentItemValue: 1,
      clockInterval: ''
    };
  },
  created(){
    this.currentItemValue = this.currentItem;
    this.clockInterval = setInterval(() =>{
      if(this.currentItemValue < this.total){
        this.currentItemValue ++;
      }else{
        this.currentItemValue = this.currentItem;
        this.carry(this.currentItemValue)
      }
    },1000)
  },
  destroyed(){
    clearInterval(this.clockInterval)
  },
  methods: {
    getStyle(index) {
      let angle = ((index + this.currentItemValue) * 360) / this.total;
      return `transform:rotate(${angle}deg); transform-origin: -${this.level * 50}px 0;`;
    },
    carry(val){
      this.$emit("changeAdd",val);
    }
  },
  watch:{
    currentItemValue(value){
      this.currentItemValue = value
    }
  },
  computed: {
    months(){
      let days = [];
      for(let i = 1; i <= this.total; i++ ){
        days.push(i);
      }
      return days;
    },
    itemStyle(){
      return `left: ${this.level * 50 + 200}px;`
    }
  }
};
</script>

<style>
.months{
  position: absolute;
  top: 300px;
}
.clock-warpper {
  position: relative;
  height: 600px;
  width: 600px;
  left: 50%;
  top: 50%;
  transform:translate(-300px,0)
}
.count-item {
  height: 20px;
  width:100px;
  line-height: 20px;
  text-align: center;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
</style>